<template>
  <div class="my-piece">
    <SearchBar
      :searchParams="searchParams"
      @search="handleSearch"
      @reset="handleReset"
    />
    <el-tabs v-model="activeTab" @tab-change="handleTabChange">
      <el-tab-pane label="我的粉丝" name="fans"></el-tab-pane>
      <el-tab-pane label="我的关注" name="follow"></el-tab-pane>
    </el-tabs>
    <MyFans v-if="activeTab === 'fans'" :search-params="searchParams" />
    <MyFollow v-if="activeTab === 'follow'" :search-params="searchParams" />
  </div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import MyFans from './components/MyFans.vue';
import MyFollow from './components/MyFollow.vue';
import SearchBar from './components/SearchBar.vue';

const activeTab = ref<'fans' | 'follow'>('follow');
const searchParams = ref({
  name: '',
  dateRange: [],
  page: 1,
  size: 20
});

const route = useRoute();
const router = useRouter();
// 监听 route 变化，切换tab
watch(
  () => route,
  (val) => {
    // 类型安全检查，确保只接受 'fans' 或 'follow' 值
    if (
      val.query.tab &&
      (val.query.tab === 'fans' || val.query.tab === 'follow')
    ) {
      activeTab.value = val.query.tab as 'fans' | 'follow';
    }
  },
  { immediate: true, deep: true }
);

function handleTabChange(name: string | number) {
  // 类型安全检查，确保只接受 'fans' 或 'follow' 值
  if (typeof name === 'string' && (name === 'fans' || name === 'follow')) {
    activeTab.value = name;
    router.push('/friends?tab=' + name);
  }
}

function handleSearch(params: any) {
  // 可将 params 传递给下方表格组件
  searchParams.value = { ...params };
}

function handleReset() {
  searchParams.value = {
    name: '',
    dateRange: [],
    page: 1,
    size: 20
  };
}
</script>

<style scoped>
.my-piece {
  padding: 24px;
  background-color: #fff;
}
.filter-bar {
  margin-bottom: 16px;
}
.btn-group {
  margin-bottom: 16px;
  display: flex;
  justify-content: flex-end;
}
</style>
